
var myshifts = ['1_2','1_3'];
var myavails = [4,5];

var mouseHeld = false;

function drag(slotId) {
    if (mouseHeld) {
        toggle(slotId);
    }
}

function down(slotId) {
    toggle(slotId);
    mouseHeld = true;
}

function up() {
    mouseHeld = false; 
}

function include(obj,arr) {
    return (arr.indexOf(obj) != -1);
}

function fall(form) 
{
	l = form.elements;
	for (i=1; i<=l.length; i++) 
	{
		fun(l[i].id);
	}
}

function toggle(slotId) 
{
	slot = document.getElementById(slotId);
	box = document.getElementById('b' + slotId);
	if (slot.style.backgroundColor == "white" && box.checked == false) 
	{
		slot.style.backgroundColor = "yellow";
		box.checked = true;
	}
	else {
		slot.style.backgroundColor = "white";
		box.checked = false;
	}
}

function setclass(slotId, shifts) 
{
	//slot = document.getElementById(slotId);
	//box = document.getElementById('b' + slotId);
	if (include(slotId,shifts)) 
	{
		document.getElementById(slotId).className = "display";
	}
	else
	{
		document.getElementById(slotId).className = "invisible";
	}
}

</script>

<style type="text/css">
	.test{border:1px solid black}
	.display{border:1px solid black}
    th::selection {
	background: #ffffff;
    }
    th::-moz-selection {
	background: #ffffff;
    }
	td{border:1px solid black}
	.hid{display:none}
	.invisible{visibility:hidden}
	
</style>

</head>

<body>
    <img src="/images/Logo.jpg"></img>
	<table onMouseUp="up();">
		<tr>
			<th>Time</th>
			<th>Sunday</th>
			<th>Monday</th>
			<th>Tuesday</th>
			<th>Wednesday</th>
			<th>Thursday</th>
			<th>Friday</th>
			<th>Saturday</th>
		</tr>
		<script language="JavaScript">
		
		var i = 1;
		var j = 1;
		for (i=1;i<=15;i++) 
		{
			document.write("<tr>");
			if (i < 5) {document.write("<th>"+(i+7)+" - "+(i+8)+" a.m."+"</th>"); }
			else if (i == 5) {document.write("<th>"+"noon - 1 p.m."+"</th>"); }
			else if (i == 15) {document.write("<th>"+"11 - midnight"+"</th>"); }
			else { document.write("<th>"+(i-4)+" - "+(i-3)+" p.m."+"</th>"); }
			for (j=1; j<=7; j++) 
			{
				var ID = String(j) + "_" + String(i);
				if (include(ID,myshifts))
				{
				var avail = myavails[myshifts.indexOf(ID)];
				document.write('<td onMouseOver="drag(\''+ID+'\');" onMouseDown="down(\''+ID+'\');" id="'+ID+'" style="background-color:white">avail</td>'); 
				}
				else
				{
				document.write('<td onMouseOver="drag(\''+ID+'\');" onMouseDown="down(\''+ID+'\');" id="'+ID+'" style="background-color:white"></td>'); 
				}	
			}
			document.write("</tr>");
		}
		
		var k = 1;
		var l = 1;
		for (k=1;k<=15;k++) 
		{
		for (l=1; l<=7; l++) 
			{
			var ID = String(l) + "_" + String(k);
			setclass(ID,myshifts);
			}
		}
		
		</script>	
		
	</table>
<form method="post" action="/submitAvail">

<script language="JavaScript">

	var i = 1;
	var j = 1;
		for (i=1;i<=15;i++) 
		{
			for (j=1; j<=7; j++) 
			{
				var ID = "b"+ String(j) + "_" + String(i);
				document.write('<input type="checkbox" name="'+ID+'" id="'+ID+'" class="hid">'); 
			}
			document.write("</tr>");
		}
		
</script>
<input type="text" name="email" />
<input type="submit" />
</form>
</body>
</html>

